import { ArrowUpOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Row, Select, Space, Tooltip, Divider, Col } from 'antd';
import { Option } from 'antd/lib/mentions';
import React, { Component } from 'react';

export default class UserForm extends Component {
  constructor(props) {
    super(props);
    this.userForm = React.createRef();
  }

  onFinish(values) {
    console.log('Received values of form:', values);
  }
  render() {
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 20,
        },
      },
    };
    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 20,
          offset: 4,
        },
      },
    };

    return (
      <>
        <Form
          name="DetectorPushUserFrom"
          ref={this.userForm}
          onFinish={(values) => this.onFinish(values)}
        >
          <Form.List name="users">
            {(fields, { add, move, remove }, { errors }) => {
              const that = this;
              return (
                <>
                  {fields.map((field, index) => (
                    <div key={index}>
                      <p>新增用户{index + 1}</p>
                      <Row>
                        <Space key={field.key} align="baseline">
                          <Row>
                            <Form.Item
                              noStyle
                              shouldUpdate={(prevValues, curValues) => {
                                return (
                                  prevValues.area !== curValues.area ||
                                  prevValues.sights !== curValues.sights
                                );
                              }}
                            >
                              {() => (
                                <Form.Item
                                  style={{
                                    marginBottom: 5,
                                  }}
                                  {...field}
                                  label="姓名"
                                  name={[field.name, 'userName']}
                                  fieldKey={[field.fieldKey, 'userName']}
                                >
                                  <Input />
                                </Form.Item>
                              )}
                            </Form.Item>

                            <Form.Item
                              noStyle
                              shouldUpdate={(prevValues, curValues) => {
                                return (
                                  prevValues.area !== curValues.area ||
                                  prevValues.sights !== curValues.sights
                                );
                              }}
                            >
                              {() => (
                                <Form.Item
                                  style={{
                                    marginBottom: 5,
                                  }}
                                  {...field}
                                  label="邮箱"
                                  name={[field.name, 'email']}
                                  fieldKey={[field.fieldKey, 'email']}
                                >
                                  <Input />
                                </Form.Item>
                              )}
                            </Form.Item>
                          </Row>
                          <Row>
                            <Form.Item
                              noStyle
                              shouldUpdate={(prevValues, curValues) => {
                                return (
                                  prevValues.area !== curValues.area ||
                                  prevValues.sights !== curValues.sights
                                );
                              }}
                            >
                              {() => (
                                <Form.Item
                                  style={{
                                    marginBottom: 5,
                                  }}
                                  {...field}
                                  label="手机号"
                                  name={[field.name, 'telephone']}
                                  fieldKey={[field.fieldKey, 'telephone']}
                                >
                                  <Input />
                                </Form.Item>
                              )}
                            </Form.Item>
                            <Form.Item
                              noStyle
                              shouldUpdate={(prevValues, curValues) => {
                                return (
                                  prevValues.area !== curValues.area ||
                                  prevValues.sights !== curValues.sights
                                );
                              }}
                            >
                              {() => (
                                <Form.Item
                                  style={{
                                    marginBottom: 5,
                                  }}
                                  {...field}
                                  label="地址"
                                  name={[field.name, 'address']}
                                  fieldKey={[field.fieldKey, 'address']}
                                >
                                  <Input />
                                </Form.Item>
                              )}
                            </Form.Item>
                          </Row>

                          <Tooltip title="删除该用户">
                            <MinusCircleOutlined
                              style={{
                                marginLeft: 20,
                              }}
                              onClick={() => {
                                remove(field.name);
                                // this.handleDeleteAmmos(field.name);
                              }}
                            />
                          </Tooltip>
                        </Space>
                        <Divider />
                      </Row>
                    </div>
                  ))}
                  <Form.Item>
                    <Button type="dashed" onClick={() => add()} icon={<PlusOutlined />}>
                      添加一个新用户
                    </Button>
                    <Form.ErrorList errors={errors} />
                  </Form.Item>
                </>
              );
            }}
          </Form.List>
        </Form>
      </>
    );
  }
}
